<template>
    <div class="cates">
        <ButtonGroup>
        <Button type="primary"  @click="typechange(1)">新闻分类</Button>
        <Button type="primary"  @click="typechange(2)">产品分类</Button>
        <Button type="primary"  @click="typechange(3)">测试分类</Button>
        </ButtonGroup>
        <ButtonGroup>
        <Button type="success" @click="createroot">创建分类</Button>
        </ButtonGroup>
        <Tree :data="data1" :render="renderContent" ></Tree>
        <Modal
        v-model    = "modal1"
        title      = "编辑分类管理"
        @on-ok     = "ok"
        @on-cancel = "cancel"
        :footer-hide = true
        >
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <!-- <FormItem label="parentId" prop="parentId">
                <Input v-model="formValidate.parentId"></Input>
            </FormItem>
            <FormItem label="_id" prop="_id">
                <Input v-model="formValidate._id"></Input>
            </FormItem> -->
            <FormItem label="名称" prop="title">
                <Input v-model="formValidate.title" placeholder="请输入名称"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">清除</Button>
            </FormItem>
        </Form>
    </Modal>
    </div>
</template>

<script>
    export default {
        data () {
            return {

                 formValidate: {
                    _id: '',
                    parentId: '',
                    title: '',
                    type:'',
                },
                defaultForm:{
                    _id: '',
                    parentId: '',
                    title: '',
                    type:'',
                },
                modal1:false,
                 ruleValidate: {
                    title: [
                        {required: true, message: '分类名不能为空', trigger: 'blur' },
                    ]
                 },
                type:1,
                data1:[{a:1}],
                treechild:[],
                buttonProps: {
                    type: 'default',
                    size: 'small',
                }
            }
        },
        methods: {
            typechange(num){
                this.type=num;
                this.gettreedata();
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    if(this.formValidate._id && this.formValidate._id.trim().length>0){
                        // edit
                        console.log('编辑');
                        this.axios({
                        url   : `${this.GLOBAL.serverurl}cate/${this.formValidate._id}`,
                        method: 'put',
                        data  : this.formValidate
                        }).then(res=>{
                        this.$Message.success('修改数据成功!');
                        this.modal1 = false;
                        this.gettreedata();

                        })
                    }else{
                        // add
                        console.log('添加');
                        console.log( this.formValidate);
                        this.axios({
                        url   : `${this.GLOBAL.serverurl}cate/`,
                        method: 'post',
                        data  : this.formValidate,
                        }).then(res=>{
                        this.$Message.success('添加数据成功!');
                        this.modal1 = false;
                        this.gettreedata();
                        })
                    }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            gettreedata(){
                this.axios({
                    url   : `${this.GLOBAL.serverurl}cate/list/${this.type}`,
                    method: 'post',
                }).then(res=>{
                   this.treeChangeExpand(res.data,true)
                    this.data1=res.data;
                })
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%',

                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'

                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add',
                                type:'success'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.append(data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove',
                                type:'error'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-create',
                                type:'info'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.editor(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            createroot(){
                this.formValidate = Object.assign(this.formValidate, this.defaultForm);
                this.formValidate.type=this.type;
                delete this.formValidate._id;
                delete this.formValidate.parentId;
                console.log(this.formValidate);
                this.modal1=true;
            },
            append (data) {
                this.formValidate = Object.assign(this.formValidate, this.defaultForm);
                this.formValidate.parentId=data._id;
                this.formValidate.type=this.type;
                delete this.formValidate._id;
                console.log( this.formValidate);
                this.modal1=true;
            },
            editor(root, node, data){
                this.formValidate = Object.assign(this.formValidate, this.defaultForm);
               this.formValidate.parentId=data.parentId;
               this.formValidate._id=data._id;
               this.formValidate.title=data.title;
               this.formValidate.type=this.type;

                this.modal1=true;
            },
            remove (root, node, data) {
                 this.$Modal.confirm({
                    title: '确认',
                    content: '<p>可能会影响数据结构，你是否确认删除分类?</p>',
                    onOk: () => {
                        this.treechild=[];
                        this.gettreechild(data);
                        //console.log(this.treechild.join(','));
                        this.axios({
                            url   : `${this.GLOBAL.serverurl}cate/removes`,
                            method: 'post',
                            data:{
                                ids:this.treechild.join(',')
                            }
                        }).then(res=>{
                        this.gettreedata()
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });
            },
            //递归取分类ID
            gettreechild(Object){
                this.treechild.push(Object._id);
                if(Object.children&&Object.children.length>0){
                    for(let i =0;i<Object.children.length;i++){
                        this.gettreechild(Object.children[i])
                    }
                }
            },
            //递归设置展开  前一个为树形数据，后一个为true,false
            treeChangeExpand(treeData, flag) {
                let _this = this;
                for (var i = 0; treeData && i < treeData.length; i++) {
                    this.$set(treeData[i],'expand',flag); //重要！用set方法
                    if (treeData[i].children) {
                    treeData[i].children = _this.treeChangeExpand(treeData[i].children,flag);
                    }
                }
                return treeData;
            }
        },
        mounted() {
            this.gettreedata();
        },
    }
</script>

<style scoped>
.cates{
    width:  400px;

}
</style>